<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/4
  Time: 14:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>supplier</title>
<%--    <style>--%>
<%--        .layui-form-label {--%>
<%--            position: relative;--%>
<%--            float: left;--%>
<%--            display: block;--%>
<%--            padding: 10px 20px;--%>
<%--            width: 100px;--%>
<%--            font-weight: 400;--%>
<%--            line-height: 20px;--%>
<%--            text-align: right--%>
<%--        }--%>
<%--    </style>--%>
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div style="margin-top: 50px">

    <form class="layui-form" action="">
        <div class="layui-form-item">

            <div class="layui-inline" style="margin-left: 300px">
                <label class="layui-form-label">联系人：</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="supContact" id="supContact" autocomplete="off">
                </div>
            </div>

            <div class="layui-inline">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
                </div>
            </div>
        </div>
    </form>

    <table class="layui-hide" id="test" lay-filter="test"></table>
    <div id="find"></div></div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn  layui-btn-normal layui-btn-xs" lay-event="show">展示</a>
</script>

<script src="${pageContext.request.contextPath}/statics/layui/layui/layui.js" charset="utf-8"></script>
<script>

    layui.use(['table','form','jquery'], function(){
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;
        // 工具栏事件
        function quXiao(){
            $("#find").empty()
        }
        var tableIns = table.render({
            elem: '#test'
            ,url: '${pageContext.request.contextPath}/supplier/list'
            ,toolbar: '#toolbarDemo'
            ,cols: [
                [
                {field: 'id', width:50,  title: '编号', sort: false}
                , {field: 'supCode',width:120,  title: '供货商编号'}
                , {field: 'supName',width:120, title: '供货商名称', sort: false}
                , {field: 'supDesc',width:120, title: '供货商描述'}
                , {field: 'supContact',width:120, title: '供货商联系人' }
                , {field: 'supPhone',width:120,  title: '联系电话', sort: false}
                , {field: 'supAddress',width:120,  title: '供货商地址', sort: false}
                , {field: 'supFax',width:80, title: '传真', sort: false}
                , {field: 'file',  title: '图片', width: 80, sort: false}
                ,{fixed: 'right', title:'操作',minWidth: 160, toolbar: '#barDemo'}
            ]
            ]
            ,page: true
        });
        // 工具栏事件
        table.on('toolbar(test)', function(obj){
            switch(obj.event){
                case 'add':
                    window.open('toadd')
                    break;
            };
        });
        //触发单元格工具事件
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'view'){
                window.open('view/'+data.id)
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.get('delete2/'+data.id,function (data) {
                        layer.close(index);
                        if (data=="1"){
                            layer.confirm('删除成功')
                            location.reload();
                        }else{
                            alert("删除失败")
                        }
                    })
                });
            } else if(obj.event === 'edit'){
                window.open('toupdate2/'+data.id)
                // layer.open({
                //   title: '编辑',
                //   type: 1,
                //   area: ['80%','80%'],
                //   content: '<div style="padding: 16px;">自定义表单元素</div>'
                // });
            }else if (obj.event === 'show'){
                $.ajax({
                    type : "get",
                    url : "find2?id="+data.id,
                    data : "",
                    dataType : "json",
                    async : true,
                    success : function(jsonData) {
                        var img="http://localhost:8080${pageContext.request.contextPath}/statics/upload/"+jsonData.fileImg
                        $("#find").append(
                            "<div>供货商编号："+jsonData.supCode+"<button class='layui-icon layui-icon-export' id='withExport'>取消展示</button>"+"</div>"
                            +"<div>供货商名称："+jsonData.supName+"</div>"
                            +"<div>供货商描述："+jsonData.supDesc+"</div>"
                            +"<div>供货商联系人:"+jsonData.supContact+"</div>"
                            +"<div>联系电话："+jsonData.supPhone+"</div>"
                            +"<div>供货商地址："+jsonData.supAddress+"</div>"
                            +"<div id='idpi'>证件照：</div>"
                        )
                        $("#idpi").append("<img src='"+img+"'/>")
                    }
                });
            }
            $("#find").empty()


        });
        $(document).on('click',"#withExport",function(){
            $("#find").empty()
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            console.log(data.field)
            //这里以搜索为例
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    realName: data.field.realName
                    ,roleId: data.field.roleId
                    //…
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            return false;
        });


    });
</script>
</body>
</html>
